<script lang="ts" setup>
import LinkApi, { LinkVo } from '@/api/link'

const currentYear = new Date().getFullYear()

const links = [
  {
    title: '友情链接',
    items: [
      { name: 'GitHub', url: 'https://github.com' },
      { name: 'Vue.js', url: 'https://vuejs.org' },
      { name: 'Element Plus', url: 'https://element-plus.org' },
    ],
  },
  {
    title: '技术栈',
    items: [
      { name: 'Vue 3', url: '#' },
      { name: 'TypeScript', url: '#' },
      { name: 'Element Plus', url: '#' },
      { name: 'Vite', url: '#' },
    ],
  },
  {
    title: '联系我',
    items: [
      { name: 'Email: example@email.com', url: 'mailto:example@email.com' },
      { name: 'GitHub', url: '#' },
      { name: '掘金', url: '#' },
    ],
  },
]

const linkList = ref<LinkVo[]>()
const loading = ref(false)

onMounted(() => {
  initData()
})

async function initData() {
  try {
    loading.value = true
    const res = await LinkApi.getLinkList()
    if (res.success) {
      linkList.value = res.items ?? []
      links[0].items = linkList.value.map((item) => ({
        name: item.name ?? '',
        url: item.address ?? '',
      }))
    }
  } catch (e) {
    console.log(e)
  } finally {
    loading.value = false
  }
}
</script>

<template>
  <footer class="footer">
    <div class="container">
      <div class="footer-content">
        <!-- 链接区域 -->
        <div v-loading="loading" class="footer-links">
          <div
            v-for="(section, index) in links"
            :key="index"
            class="link-section">
            <h3>{{ section.title }}</h3>
            <ul>
              <li v-for="(item, itemIndex) in section.items" :key="itemIndex">
                <a :href="item.url" target="_blank" rel="noopener noreferrer">
                  {{ item.name }}
                </a>
              </li>
            </ul>
          </div>
        </div>

        <!-- 分割线 -->
        <div class="footer-divider"></div>

        <!-- 版权信息 -->
        <div class="footer-bottom">
          <p>© {{ currentYear }} Your Blog Name. All rights reserved.</p>
          <p class="footer-motto">Stay Hungry, Stay Foolish</p>
        </div>
      </div>
    </div>
  </footer>
</template>

<style lang="scss" scoped>
// body {
//   background-color: #1a1a1a;
//   color: #ffffff; /* 主要文字颜色使用白色 */
// }

/* 次要文字 */
.secondary-text {
  color: #b3b3b3; /* 浅灰色，用于次要信息 */
}

/* 链接样式 */
a {
  color: #4a9eff; /* 亮蓝色，用于链接 */
}
a:hover {
  color: #66adff; /* 鼠标悬停时稍微变亮 */
}

.footer {
  // margin-top: 3rem;
  padding: 3rem 0 2rem;
  //   background: linear-gradient(
  //     to bottom,
  //     rgba(210, 215, 225, 0.95),
  //     rgba(200, 205, 220, 0.98)
  //   );
  background-color: #1a1a1a;
  backdrop-filter: blur(5px);
  border-top: 1px solid rgba(255, 255, 255, 0.1);

  .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
  }

  .footer-content {
    .footer-links {
      display: flex;
      justify-content: space-around;
      flex-wrap: wrap;
      gap: 2rem;

      .link-section {
        min-width: 200px;

        h3 {
          color: #ffffff;
          font-size: 1.4rem;
          margin-bottom: 1.2rem;
          font-weight: 600;
        }

        ul {
          list-style: none;
          padding: 0;

          li {
            margin-bottom: 0.8rem;

            a {
              color: #b3b3b3;
              text-decoration: none;
              transition: color 0.3s ease;
              font-size: 1.1rem;
              line-height: 1.6;

              &:hover {
                color: #4a9eff;
              }
            }
          }
        }
      }
    }

    .footer-divider {
      height: 1px;
      background: linear-gradient(
        to right,
        transparent,
        rgba(255, 255, 255, 0.1),
        transparent
      );
      margin: 2.5rem 0;
    }

    .footer-bottom {
      text-align: center;
      color: #b3b3b3;

      p {
        margin: 0.7rem 0;
        font-size: 1.1rem;
      }

      .footer-motto {
        color: #999999;
        font-style: italic;
        margin-top: 0.8rem;
        font-size: 1.2rem;
      }
    }
  }
}

@media (max-width: 768px) {
  .footer {
    padding: 2rem 0 1rem;

    .footer-links {
      flex-direction: column;
      align-items: center;
      text-align: center;

      .link-section {
        min-width: 150px;

        h3 {
          font-size: 1.1rem;
        }

        ul li a {
          font-size: 0.95rem;
        }
      }
    }

    .footer-bottom {
      p {
        font-size: 0.9rem;
      }

      .footer-motto {
        font-size: 1rem;
      }
    }
  }
}
</style>
